<template>
  <div class="box">
    <h2>祖先组件</h2>
    <ComponentsSon></ComponentsSon>
  </div>

</template>

<script setup>
import ComponentsSon from './components/ComponentsSon.vue';
import { provide, ref } from 'vue';

const grandFartherMsg = ref('message from grand farther')
provide('GFMsg', grandFartherMsg)

const changeMsg = () => {
  grandFartherMsg.value = 'msg has changed'
}
provide('methodChangeMsg', changeMsg)

</script>

<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
}
</style>
